<template>
  <a-card class="content" :bordered="false">
    <div class="table-page-search-wrapper">
      <a-form layout="inline">
        <a-row :gutter="48">
          <a-col :md="8" :sm="24">
            <a-form-item label="分销ID">
              <a-input v-model="queryParam.id" placeholder=""/>
            </a-form-item>
          </a-col>
          <a-col :md="!advanced && 8 || 24" :sm="24">
            <span class="table-page-search-submitButtons" :style="advanced && { float: 'right', overflow: 'hidden' } || {} ">
              <a-button type="primary" @click="queryDistributionList">查询</a-button>
              <a-button style="margin-left: 8px" @click="queryDistributionList">重置</a-button>
            </span>
          </a-col>
        </a-row>
      </a-form>
    </div>
    <div class="table-operator">
      <a-button type="primary" icon="plus" @click="showModal">新建</a-button>
      <!-- 模态框     -->
      <a-modal v-model="visible" title="创建分销商品" onOk="handleOk" width="70%"
      style="top:30px;height:100%;">
          <!-- 按钮 -->
          <template slot="footer">
            <a-button key="back" @click="handleCancel" style="margin-left: 8px">取消</a-button>
            <a-button key="submit" @click="handleOk" type="primary">确定</a-button>
          </template>
          <!-- 模态框表单 -->
          <!-- box1 -->
          <div class="box1">
            <h1>商品属性（Spu）</h1>
            <a-form :form="form">
              <a-form-item
              label="分销商品"
              :labelCol="{lg: {span: 6}, sm: {span: 6}}"
              :wrapperCol="{lg: {span: 15}, sm: {span: 15} }">
                <el-cascader
                v-model="value"
                :options="options1"
                @change="handleChange"></el-cascader>
              </a-form-item>
            </a-form>
          </div>
          <!-- box2 -->
          <div class="box2">
            <h1>商品类型（Sku）</h1>
            <a-table :columns="columnsbox2" :dataSource="skuListData" rowKey="id">
              <span slot="action" slot-scope="text,record">
                <a href="javascript:;" v-if="record.id" @click="updateModal(record)">更新</a>
              </span>
              <span slot="price" slot-scope="price">{{price}}</span>
              <span slot="vipPrice" slot-scope="vipPrice">{{vipPrice}}</span>
            </a-table>
          </div>
          <!-- 更新模态框 -->
          <a-modal title="更新分销价格" v-model="visiblebox2" @ok="updateOk">
            <a-row>
              <a-col :span="20">
                <a-form-item
                label="分销价格"
                :labelCol="{lg: {span: 10}, sm: {span: 10}}">
                  <div>
                    <a-input-number :min="1" v-model="distributionPrice"/>元
                  </div>
                </a-form-item>
              </a-col>
            </a-row>
            <a-row>
              <a-col :span="20">
                <a-form-item
                label="现价"
                :labelCol="{lg: {span: 10}, sm: {span: 10}}">
                  <div>{{skuListData[0].vipPrice}}元</div>
                </a-form-item>
              </a-col>
            </a-row>
            <a-row>
              <a-col :span="20">
                <a-form-item
                label="Sku类型名"
                :labelCol="{lg: {span: 10}, sm: {span: 10}}">
                  <div>{{skuListData[0].title}}</div>
                </a-form-item>
              </a-col>
            </a-row>
          </a-modal>
      </a-modal>
    </div>
    <!-- 表格 -->
    <a-table :columns="distributionGoodsColumns" :dataSource="data" class="components-table-demo-nested" :pagination="pagination"
    :loading="loading1" rowKey="id">
    <img  style="width:50px;height:50px" slot="img" slot-scope="img" :src="img" />
    <span slot="status" slot-scope="status">
      <a-tag color="blue" v-if="status === undefined"></a-tag>
      <a-tag color="blue" v-if="status === 1">激活</a-tag>
      <a-tag color="blue" v-if="status === 0">冻结</a-tag>
    </span>
    <span slot="action" slot-scope="action, record">
      <a-button type="danger"
        class="table-danger flyray-btn"
          @click="showDeleteConfirm(record)" >删除</a-button>

    </span>
    <span slot="gmtStart" slot-scope="gmtStart">{{gmtStart | formDate}}</span>
    <span slot="gmtEnd" slot-scope="gmtEnd">{{gmtEnd | formDate}}</span>
      <a-table
        slot="expandedRowRender"
        slot-scope="record"
        rowKey="id"
        :columns="innerColumns"
        :dataSource="record.distributionGoodsSkuDTOS"
        :pagination="false"
      >
      <span slot="skuGroupShopPrice" slot-scope="skuGroupShopPrice">{{skuGroupShopPrice | filterPrice}}</span>
      <span slot="originalPrice" slot-scope="originalPrice">{{originalPrice | filterPrice}}</span>
      <span slot="price" slot-scope="price">{{price | filterPrice}}</span>
      <span slot="vipPrice" slot-scope="vipPrice">{{vipPrice | filterPrice}}</span>
      </a-table>
    </a-table>
  </a-card>

</template>

<script>
import { getRoleList } from '@/api/manage'
import { getList } from '@/api/mall/groupBuying'
import { distributionGoodsColumns,columnsbox2,innerColumns} from '@/const/crud/mall/distributionGoods.config'
import { addGoodsToDistributionPool, queryDistributionList, getSpuBigTree,deleteGroupShopSpu,detail} from '@/api/mall/distributionGoods'


// 图片上传
function getBase64(img, callback) {
  const reader = new FileReader();
  reader.addEventListener('load', () => callback(reader.result));
  reader.readAsDataURL(img);
}
  //   表头
export default {
  name:'groupBuying',
  components: {
  },
  data () {
    return {
      distributionPrice:0,//更新价格
      editId:null,//更新id
      columnsbox2,
      valueRS:1,
      // 团购商品
      options1: [],
      imageUrl: '',
      // 表格数据引入
      data: [],
      skuListData:[
        {id:'',title:'',vipPrice:null,price:null}
      ],
      createValue:[],//时间日期控件
      loading1:false,
      pagination: {},
      distributionGoodsColumns,
      innerColumns,
      innerData:[],
      // 高级搜索 展开关闭
      advanced: false,
      // 模态框状态
      loading: false,
      visible: false,
      // box2更新模态框
      visiblebox2: false,
      // 表单数据
      value: 1,
      form: this.$form.createForm(this),
      // 查询参数
      queryParam: {
        id:null,   // 团购id
      },
      parameter:{
        pageNo:1,  //第一页数据
        pageSize:5,  // 五条
        id:null,
        //spuId:null,

      },
      // 添加数据
      tjdata:{
        'spuId': null,
        'distributionGoodsSkuList':''
      },

    }
  },
  // 计算属性
  computed: {
    // 价格
    Price(){
      return this.skuListData[0].price
    },
  },
  filters: {
    // 过滤价格
    filterPrice(price){
      return price/100
    },
    statusFilter (type) {
      return statusMap[type].text
    },
    statusTypeFilter (type) {
      return statusMap[type].status
    },
  },
  created () {
    this.queryDistributionList();
    this.gainTree();

  },
  methods: {
    showDeleteConfirm(val) {
      var _this = this
      this.$confirm({
        title: `确定删除------${val.id}-------吗？`,
        okText: 'Yes',
        okType: 'danger',
        cancelText: 'No',
        onOk() {
          console.log(de);
          // 请求删除
          let deldatas={
            _gp: 'admin.groupShop',
            _mt: 'deleteGroupShopSpu',
            adminId:13,
            id:de.id
          }
          let postData=this.$qs.stringify(deldatas)
          this.parameter=postData
          deleteGroupShopSpu(Object.assign(this.parameter)).then(res => {
            this.queryDistributionList();

          })
          this.$message.success('您已成功删除');
        },
        onCancel() {
          // console.log('Cancel');
        }
      })
    },
    // box2更新模态框
    updateModal(val) {
      this.editId = val.id;
      console.log(val)
      this.distributionPrice = val.originalPrice;
      this.visiblebox2 = true;
    },
    updateOk(e) {
      let that = this;
      that.skuListData.forEach(function(ele,index,arr){
          if(ele.id == that.editId){
            ele.originalPrice = that.distributionPrice;
          }
      })
      this.visiblebox2 = false;
    },
    // 请求box2数据
    skuDetial(){
      detail(Object.assign(this.parameter)).then(res => {
          let obj={};
          let arr=[];
          console.log(res)
          this.skuListData = res.data.skuList;
          this.tjdata.spuId=res.data.skuList[0].spuId;
          obj["skuId"]=res.data.skuList[0].id;
          obj["skuDistributionGoodsPrice"] = this.distributionPrice;
          arr.push(obj);
          this.tjdata['distributionGoodsSkuList']=JSON.stringify(arr);
      })
    },
    //  分销商品
    handleChange(value) {
      let va=value[value.length-1];
      // console.log(value);
      this.parameter.spuId = va.slice(2)
      this.skuDetial();
    },
    // 查询
    queryDistributionList(){
      queryDistributionList(Object.assign(this.parameter)).then(res => {
        this.data=res.data.items;
        this.pagination.total = res.data.total
      })
    },

    // 模态框
    showModal() {
      this.visible = true;
      this.gainTree();
    },
    // 递归判断列表，解决最后一个children最后一项为空，设置成undefined
    getTreeData(data){
      for(var i=0;i<data.length;i++){
        if(data[i].children.length<1){
          // children若为空数组，则将children设为undefined
          data[i].children=undefined;
        }else {
          // children若不为空数组，则继续 递归调用 本方法
          this.getTreeData(data[i].children);
        }
      }
      return data;
    },
    // 获取树
    gainTree(){
      getSpuBigTree(Object.assign(this.parameter)).then(res => {
        //console.log(res)
        this.options1=this.getTreeData(res.data);

      })
    },
    handleOk(e) {
        //向后天发起请求
        addGoodsToDistributionPool(this.tjdata).then(res => {
          this.visible = false;
          this.queryDistributionList();
          this.loading1=false;
        })
    },

    handleCancel(e) {
      this.visible = false;
    },
  }
}
</script>
<style scoped>
  .flyray-btn{
    font-size:12px;padding:0 7px;margin:0 0 0 3px;height:24px;
  }
  .table-danger{
      color: #fff;
      background-color: #ff4d4f;
      border-color: #ff4d4f;
      margin-left: 5px;
  }
  .avatar-uploader > .ant-upload {
    width: 128px;
    height: 128px;
  }
  .ant-upload-select-picture-card i {
    font-size: 32px;
    color: #999;
  }

  .ant-upload-select-picture-card .ant-upload-text {
    margin-top: 8px;
    color: #666;
  }
  .box1,.box2{
    background-color: #fff;
    overflow: hidden;
    margin-bottom: 3px;
    box-shadow:#d4d4d4 0px 0px 3px;
  }
  .box1 h1,.box2 h1{
    font-size: 16px;
    margin:20px 0 0 15px;
    font-weight: bold;
  }
  .ant-modal-title{
    text-align: center;
    font-size: 18px;
  }
  .ant-form-item-label{
    text-align: left !important;
    padding-left: 6% !important;
  }
</style>

